<template>
  <div class="chart-container">
    <div class="chart-header">
      <div class="chart-controls">
        <div class="time-range-selector">
          <span class="text-[14px] text-[#333]">时间范围</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            size="small"
          />
          <span class="text-[14px] text-[#333]">频次</span>
          <el-select v-model="selectedFrequency" size="small" style="width: 80px">
            <el-option label="全部" value="all" />
            <el-option label="月度" value="monthly" />
            <el-option label="周度" value="weekly" />
            <el-option label="日度" value="daily" />
          </el-select>
        </div>
        <el-checkbox v-model="showExtremes">显示最值</el-checkbox>
      </div>
    </div>
    <div class="chart-content">
      <v-chart
        ref="chartRef"
        :autoresize="true"
        :option="chartOption"
        :style="{ height: height + 'px' }"
        class="chart"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import type { ChartSeries, EChartsOption } from '../types'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
])

interface Props {
  series: ChartSeries[]
  height?: number
  yAxisRange?: [number, number]
}

const props = withDefaults(defineProps<Props>(), {
  height: 300,
  yAxisRange: [-15, 25],
})

const dateRange = ref<[string, string]>(['2007-07-02', '2023-06-30'])
const selectedFrequency = ref('all')
const showExtremes = ref(false)

const chartOption = computed<EChartsOption>(() => {
  const option: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      type: 'scroll',
      left: 'center',
      height: 'auto',
      bottom: -5,
      itemWidth: 16, // 图例标记的图形宽度。
      itemHeight: 2, //  图例标记的图形高度。
      itemGap: 40, //图例之间的间距
      icon: 'roundRect', //circle 圆形rect 矩形roundRect 圆角矩形triangle 三角形diamond 菱形pin arrow 箭头none 无
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '3%',
      containLabel: true,
      show: true,
      backgroundColor: '#F5F9FF', //图表背景色必须加show:true
      borderWidth: 0, //图表边框
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.series[0]?.data.map((d) => d.date) || [],
    },
    yAxis: {
      type: 'value',
      min: props.yAxisRange[0],
      max: props.yAxisRange[1],
      axisLabel: {
        formatter: '{value}',
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    dataZoom: [
      {
        height: 15,
        start: 50,
      },
    ],
    series: props.series.map((series) => ({
      name: series.name,
      type: 'line',
      data: series.data.map((d) => d.value),
      smooth: true,
      lineStyle: {
        color: series.color,
      },
      itemStyle: {
        color: series.color,
      },
    })),
  }

  return option
})

// 监听控制变化
watch([dateRange, selectedFrequency, showExtremes], () => {
  console.log('Credit cycle chart controls changed:', {
    timeRange: dateRange.value,
    frequency: selectedFrequency.value,
    showExtremes: showExtremes.value,
  })
})
</script>

<style scoped>
.chart-container {
  border: 1px solid #d4d8e5;
  padding: 10px;
  border-radius: 4px;
}

.chart-header {
  @apply flex justify-between items-center mb-4;
}

.chart-controls {
  @apply flex items-center space-x-4;
}

.time-range-selector {
  @apply flex space-x-2;
}
</style>
